<template>
  <base-list
    page-title="列表"
    :search-schemas="search_schemas"
    :table-columns="table_columns"
    :form-params="formParams"
    :rules="rules"
    @edit="setFormParams"
    :url="url"
  >
    <template #form>
      <n-form-item label="名称" path="name">
        <n-input placeholder="请输入名称" v-model:value="formParams.name" />
      </n-form-item>
      <n-form-item label="地址" path="address">
        <n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address" />
      </n-form-item>
      <n-form-item label="日期" path="date">
        <n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date" />
      </n-form-item>
    </template>
  </base-list>
</template>

<script lang="ts" setup>
  import { BaseList } from '@/components/BasicList';
  import { FormSchema } from '@/components/Form';
  import { BasicColumn } from '@/components/Table';
  import { h, ref } from 'vue';
  import { FormRules, NAvatar } from 'naive-ui';

  // 表单字段内容
  const formParams = ref({
    name: '',
    address: '',
    date: null,
  });

  // 定义接口
  const url = {
    list: '',
    delete: '',
    load: '',
    save: '',
  };

  // 搜索字段
  const search_schemas: FormSchema[] = [
    {
      field: 'name',
      component: 'NInput',
      label: '姓名',
      componentProps: {
        placeholder: '请输入姓名',
      },
    },
    {
      field: 'mobile',
      component: 'NInputNumber',
      label: '手机',
      componentProps: {
        placeholder: '请输入手机号码',
        showButton: false,
      },
    },
  ];

  // 赋值
  const setFormParams = (v) => {
    let value = JSON.parse(JSON.stringify(v));
    if (value.date) {
      value.date = new Date(value.date).getTime();
    }
    formParams.value = value;
  };

  // 表单校验规则
  const rules: FormRules = {
    name: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入名称',
    },
    address: {
      required: true,
      trigger: ['blur', 'input'],
      message: '请输入地址',
    },
    date: {
      type: 'number',
      required: true,
      trigger: ['blur', 'change'],
      message: '请选择日期',
    },
  };

  // 表格字段
  const table_columns: BasicColumn<any>[] = [
    {
      title: '名称',
      key: 'name',
      width: 100,
    },
    {
      title: '头像',
      key: 'avatar',
      width: 100,
      render(row) {
        return h(NAvatar, {
          size: 40,
          src: row.avatar,
        });
      },
    },
    {
      title: '地址',
      key: 'address',
      ifShow: (_column) => {
        return true;
      },
      width: 150,
    },
    {
      title: '开始日期',
      key: 'beginTime',
      width: 160,
    },
    {
      title: '结束日期',
      key: 'endTime',
      width: 160,
    },
    {
      title: '创建时间',
      key: 'date',
      width: 100,
    },
  ];
</script>
